<template>
  <div class='app'>
    <header style="background: #ebeef5;color: #404040;">
      <div class="imgBox">
        <img src="https://file.cassmall.com/images/logo.png">
      </div>
    <em class='em' style="font-size: 23px;z-index: 99;">产品迭代发布日志系统</em>
    </header>
    <el-container>
      <el-aside>
        <el-menu
          :default-active='defaultActive'
          class="el-menu-vertical-demo"
          background-color="#404040"
          active-text-color='#3c8dbc'
          text-color="#fff"
          padding="padding: 37px 20px"
          :router=true>
          <el-menu-item index="1" route='newLog'>
            <i class="el-icon-plus"></i>
            <span>发布日志</span>
          </el-menu-item>
          <el-menu-item index="2" route='sprint'>
            <i class="el-icon-date"></i>
            <span>迭代</span>
          </el-menu-item>
          <el-menu-item index="3" route='log'>
            <i class="el-icon-document"></i>
            <span>日志</span>
          </el-menu-item>
          <el-menu-item index="4" route='group'>
            <i class="el-icon-setting"></i>
            <span>团队</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main style="background: #fff;" >
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      defaultActive: '2'
    }
  },
  created () {
    this.checkActiveMenu()
  },
  computed: {
    ...mapGetters(['version'])
  },
  watch: {
    $route () {
      this.checkActiveMenu()
    }
  },
  methods: {
    checkActiveMenu () {
      const fullPath = this.$router.currentRoute.path
      const path = fullPath.split('/')[1]
      switch (path) {
        case 'log':
          this.defaultActive = '3'
          break
        case 'logDetails':
          this.defaultActive = '3'
          break
        case 'group':
          this.defaultActive = '4'
          break
        case 'newLog':
          this.defaultActive = '1'
          break
        default:
          this.defaultActive = '2'
      }
    }
  }
}
</script>

<style lang='sass'>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input
  margin: 0
  padding: 0
  border: 0
  font-weight: normal
  vertical-align: baseline
article, aside, details, figcaption, figure,
footer, header, menu, nav, section
  display: block
body
  line-height: 1
blockquote, q
  quotes: none
blockquote:before, blockquote:after,
q:before, q:after
  content: none
table
  border-collapse: collapse
  border-spacing: 0
a
  color: #7e8c8d
  -webkit-backface-visibility: hidden
  text-decoration: none
li
  list-style: none
body
  -webkit-text-size-adjust: none
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
html, body, #app
  height: 100%
  width: 100%
  padding: 0
  margin: 0
#app
  font-family: 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-align: center
  color: #2c3e50
.app
  height: 100%
header
  height: 80px!important
  line-height: 80px
  background: #3c8dbc
  color: #fff
  font-size: 20px
  text-indent: 20px
.el-container
  height: calc(100% - 80px)
.el-aside
  background: #404040
  width: 200px!important
  .el-menu
    border-right: none
.el-submenu .el-menu-item
  text-indent: 14px
.el-main
  background: #eee
  padding: 0
.container
  width: 100%
  height: 100%
.item
  font-weight: normal
  vertical-align: baseline
  font-size: 30px
  display: block
  margin: 3% 0%
.imgBox
  width: 200px
  height: 100px
  overflow: hidden
  position: relative
.imgBox img
  width: 460px;
  margin: 6% -9%;
.em
  position: absolute
  top: 0
  left: 15%
</style>
